<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- <link rel="stylesheet" type="text/css" href={{ url_for("static",filename="index.css" ) }} /> -->
    <!-- Jcrop 剪裁图片js工具 -->
    <script src="../static/tapmodo-Jcrop-1902fbc/js/jquery.min.js"></script>
    <script src="../static/tapmodo-Jcrop-1902fbc/js/jquery.Jcrop.js"></script>
    <link rel="stylesheet" href="../static/tapmodo-Jcrop-1902fbc/css/jquery.Jcrop.css">
    <link rel="stylesheet" href="../static/tapmodo-Jcrop-1902fbc/css/jquery.Jcrop.min.css">
    <style>
        html,
        body {
            height: 100%;
            background-image: url('./static/Background-Image.jpg');
            background-repeat: round;
            background-attachment: fixed;
        }

        .search-box {
            padding-left: 15%;
            padding-right: 15%;
            padding-top: 15%;
            padding-bottom: 10%;

        }


        #info {
            margin-top: 50px;
            margin-left: 3%;
            margin-right: 3%;
            /* margin: 50px; */
        }

        .card-text-box {
            height: 100px;
        }

        .card-text-box-centra {
            margin-top: 50%;
        }
    </style>
    <title>Document</title>
</head>

<body style="text-align: center;">
    <div class="container">
        <div class="search-box">
            <div class="row">
                <div class="col-12">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="输入--病害名称" aria-label="输入病害名称"
                            aria-describedby="basic-addon2">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary search-button" type="button">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-search" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                        d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />
                                    <path fill-rule="evenodd"
                                        d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />
                                </svg>

                            </button>
                            <button class="btn btn-outline-secondary" type="button" data-toggle="modal"
                                data-target="#cropModal">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-instagram" viewBox="0 0 16 16">
                                    <path
                                        d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
                                </svg>
                            </button>

                            <!-- Modal -->
                            <div class="modal fade" id="cropModal" tabindex="-1" role="dialog"
                                aria-labelledby="ecropModalTitle" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="cropModalTitle">上传图片</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">

                                            <div class="container-fluid">
                                                <div class="row  text-center">
                                                    <!-- 要将父布局的position设置为relative，父布局将无法包裹input -->
                                                    <div>
                                                        <!--设置input的position为absolute，使其不按文档流排版，并设置其包裹整个布局 -->
                                                        <!-- 设置opactity为0，使input变透明 -->
                                                        <!-- 只接受jpg格式 -->
                                                        <input id="upload-input"
                                                            style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;"
                                                            type="file" accept="image/jpg" onchange="showImg(this)" />
                                                        <!-- 自定义按钮效果 -->
                                                        <div style="text-align: top">
                                                            <span style="font-size: 12px;">上传文件：</span>
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                                height="16" fill="currentColor"
                                                                class="bi bi-cloud-arrow-up" viewBox="0 0 16 16">
                                                                <path fill-rule="evenodd"
                                                                    d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z" />
                                                                <path fill-rule="evenodd"
                                                                    d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z" />
                                                            </svg>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <img src="" id="jcrop-img" height="100%" width="100%">
                                                </div>
                                                <div id="">
                                                    <p></p>
                                                </div>
                                            </div>
                                            <button id="crop-button" type="button" class="btn btn-primary"
                                                onclick="cropImg(this)">选取</button>
                                            <button id="crop-button" type="button" class="btn btn-primary"
                                                onclick="destroyCropImg(this)">取消选取</button>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                data-dismiss="modal">取消</button>
                                            <button type="button" class="btn btn-primary"
                                                onclick="img_crop_to_python(this)">识别</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <!-- Modal -->

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="info">
            {% for row in image_lists %}
            <div class="row">
                {% for card in row %}
                <div class="col-md-3">
                    <div class="card mb-3 shadow-sm" style="cursor: pointer">
                        <img class="card-img-top" src="{{card.path}}">

                        <div class="card-body card-click">
                            <p class="card-text">{{card.name}}</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endfor %}
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $(".card").click(function () {
                var name = $(this).find('p').text()
                console.log(name)
                // 与后端通信，展示所点击图片的文档pdf
                window.open("./diseases?name=" + name)
            })
            $(".search-button").click(function () {
                var name = $('input').val()
                console.log(name)
                if (name != "") {

                } else {
                    alert("病害名称不能为空！")
                }
            })
        })

        var file; //读取的图片
        var jcropApi; //Jcrap全局变量
        var imgX; //需要剪裁区域左上角的x坐标
        var imgY; //需要剪裁区域左上角的y坐标
        var width; //需要剪裁的宽度
        var height; //需要剪裁的宽度

        function destroyCropImg() {
            if (jcropApi != null) {
                jcropApi.destroy()
            }
        }

        function showImg(input) {

            file = input.files[0]
            var reader = new FileReader()
            // 图片读取成功回调函数
            reader.onload = function (e) {
                document.getElementById('jcrop-img').src = e.target.result
            }
            reader.readAsDataURL(file)
        }
        function cropImg() {
            var name = $('#')
            $('#jcrop-img').Jcrop({
                allowSelect: true,
                baseClass: 'jcrop'
            }, function () {
                jcropApi = this;
            });

        }

        function img_crop_to_python() {
            // var imgX = jcropApi.tellSelect()
            //获取照片实际的大小
            var image = new Image()
            image.src = $("#jcrop-img")[0].src;
            // var n
            var cropSize = jcropApi.tellSelect()
            var H1 = image.height
            var W1 = image.width
            var H2 = jcropApi.getBounds()[1]
            var W2 = jcropApi.getBounds()[0]
            var gx = cropSize['x']/H2
            var gy = cropSize['y']/W2
            var gx2 = cropSize['x2']/H2
            var gy2 = cropSize['y2']/W2

            var cropX = parseInt(gx*H1)
            var cropY = parseInt(gy*W1)
            var cropX2 = parseInt(gx2*H1)
            var cropY2 = parseInt(gy2*W1)
            var cropSizeRadio = {"x":cropX,"y":cropY,"x2":cropX2,"y2":cropY2}
            var formdata = new FormData()

            formdata.append('file',file)
            formdata.append('size', JSON.stringify(cropSizeRadio))

            $.ajax({
                type:'post',
                url: './recognition',
                dataType: "json",
                processData: false,
                contentType: false,
                data: formdata,
                success:(res)=> {
                console.log(111,res)
                }
            });
        }



    </script>
</body>

</html>